<template>
	<!-- 头像信息 -->
	<view class="user-model">
		<view class="avatar-box">
			<u-avatar src="/static/images/avatar.png" size="140rpx"></u-avatar>
			<view class="info">
				<!-- 已登录 -->
				<template v-if="false">
					<view class="nickname">设置昵称</view>
					<view class="mobile">154****1456</view>
				</template>
				<!-- 未登录 -->
				<template v-else>
					<view class="nickname" @tap="login">登录/注册</view>
				</template>
			</view>
		</view>
		<view class="kf" @tap="showPhone = true">
			<u-image width="70rpx" height="54rpx" src="/static/images/a8.png"></u-image>
		</view>
	</view>
	<view class="content">
		<!-- 邀请卡片 -->
		<view class="invite-box" @tap="goVip">
			<u-image width="100%" height="172rpx" src="/static/images/b1.png"></u-image>
			<!-- <view class="invite-info">
				<view class="invite-title">
					<view class="h1">邀请有礼</view>
					<view class="h2">邀请好友登录注册享好礼</view>
				</view>
				<view>
					<u-button throttleTime="1000" :customStyle="{height: '72rpx', letterSpacing: '.1rem'}" :hairline="false" type="mini"
						shape="circle" color="linear-gradient(147deg, rgba(255,255,255,0.4) 0%, #FFFFFF 100%)"
						@click="goInvite">
						<text style="color: #D66A44;">立即邀请</text>
					</u-button>
				</view>
			</view> -->
		</view>
		<!-- 跳转区 -->
		<view class="navigate-box">
			<u-grid :border="false" col="4" @click="navigateHandle">
				<u-grid-item v-for="(item, i) in navigateList" :key="i">
					<view class="item">
						<u-image width="64rpx" height="64rpx" :src="item.icon"></u-image>
						<view>{{item.name}}</view>
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<!--  -->
		<view class="cell-group">
			<view class="cell-item" @tap="goVisitor">
				<view class="left">
					<u-image width="84rpx" height="84rpx" src="/static/images/a43.png"></u-image>
					<view>就诊人管理</view>
				</view>
				<u-icon name="arrow-right" color="#91959E" size="18"></u-icon>
			</view>
			<view class="cell-item" @tap="goAdress">
				<view class="left">
					<u-image width="84rpx" height="84rpx" src="/static/images/a13.png"></u-image>
					<view>地址管理</view>
				</view>
				<u-icon name="arrow-right" color="#91959E" size="18"></u-icon>
			</view>
			
			<view class="cell-item" @tap="goInvite">
				<view class="left">
					<u-image width="84rpx" height="84rpx" src="/static/images/a14.png"></u-image>
					<view>推广有礼</view>
				</view>
				<u-icon name="arrow-right" color="#91959E" size="18"></u-icon>
			</view>
			<view class="cell-item" @tap="goAboutUs">
				<view class="left">
					<u-image width="84rpx" height="84rpx" src="/static/images/a16.png"></u-image>
					<view>关于我们</view>
				</view>
				<u-icon name="arrow-right" color="#91959E" size="18"></u-icon>
			</view>
		</view>
	</view>

	<!-- 客服电话 -->
	<u-action-sheet round="30rpx" :show="showPhone" :actions="actions" title="" description=""
		@close="showPhone = false" @select="callConfirm">
	</u-action-sheet>

	<!-- 上传头像和昵称 -->
	<u-popup :show="userPop" @close="userPop = false" mode="center" closeOnClickOverlay bgColor="transparent">
		<view class="user-pop">
			<view class="avatar-upload">
				<view class="">
					<u-upload :fileList="fileList" @afterRead="avatarUpload" @delete="deletePic" name="6" :maxCount="1"
						width="170rpx" height="170rpx">
						<u-image shape="circle" width="170rpx" height="170rpx" src="/static/images/avatar.png"></u-image>
					</u-upload>
				</view>
			</view>
			<view class="nickname-box">
				<u-input placeholder="请输入昵称" border="none" v-model="nickname" inputAlign="center"></u-input>
			</view>
			<view class="confirm">
				<u-button :disabled="isDisabled" plain color="transparent" :hairline="false" class="custom-style" @click="editUserConfirm">
					<text style="color: #516DDB;font-size: 36rpx;">确认授权</text>
				</u-button>
			</view>
		</view>
	</u-popup>
	<!-- tabbar -->
	<TabBar :current-page="2"></TabBar>
</template>

<script setup>
	import TabBar from "@/components/Tabbar"
	import n1 from '@/static/images/a9.png'
	import n2 from '@/static/images/a10.png'
	import n3 from '@/static/images/a11.png'
	import n4 from '@/static/images/a12.png'

	// 上传头像 昵称
	const userPop = ref(false)
	const fileList = ref([])
	const nickname = ref('')
	const deletePic = () => {
		fileList.value = []
	}
	const avatarUpload = (event) => {
		console.log(event.file);
		fileList.value = [event.file]
	}
	const isDisabled = computed(() => {
		return !nickname.value || (fileList.value.length == 0)
	})
	const editUserConfirm = () => {
		userPop.value = false
	}

	// 微信登录
	const login = () => {
		// 如果没登录
		// uni.navigateTo({
		// 	url: '/pages/login/login'
		// })
		// 如果已登录
		nickname.value = ''
		fileList.value = []
		userPop.value = true
	}

	const navigateList = readonly([{
			name: '电子病历',
			href: '/mine/visitor/list',
			icon: n1
		},
		{
			name: '挂号订单',
			href: '/mine/order/list',
			icon: n2
		},
		{
			name: '商品订单',
			href: '/mine/commodity/list',
			icon: n3
		},
		{
			name: '我的礼包',
			href: '/mine/gift/gift',
			icon: n4
		}
	])
	const navigateHandle = (e) => {
		uni.navigateTo({
			url: navigateList[e].href
		})
	}
	const showPhone = ref(false)
	const actions = ref([{
			name: '一键拨打：400-8823-823',
			isCall: true
		},
		{
			name: '取消',
			isCall: false
		},
	])

	// 拨打电话
	const callConfirm = e => {
		console.log(e);
		if (e.isCall) {
			uni.makePhoneCall({
				phoneNumber: '123456'
			})
		}
	}

	// 关于我们
	const goAboutUs = () => {
		uni.navigateTo({
			url: `/mine/about-us/about-us`
		})
	}
	// 就诊人管理
	const goVisitor = () => {
		uni.navigateTo({
			url: `/mine/visitor/list`
		})
	}
	// 地址管理
	const goAdress = () => {
		uni.navigateTo({
			url: `/mine/address/list`
		})
	}
	// 推广
	const goInvite = () => {
		uni.navigateTo({
			url: '/mine/invite/invite'
		})
	}
	// 会员充值
	const goVip = () => {
		uni.navigateTo({
			url: '/mine/vip/vip'
		})
	}
</script>

<style lang="scss" scoped>
	.user-pop {
		background: #FFFFFF;
		border-radius: 16rpx;
		@include center(560rpx);
		flex-direction: column;

		.avatar-upload {
			@include center(100%);
			padding: 52rpx 0;
			border-bottom: 1rpx solid #E5E5E5;
		}

		.nickname-box {
			width: 100%;
			padding: 40rpx;
			border-bottom: 1rpx solid #E5E5E5;

		}
		.confirm {
			width: 100%;
			padding: 40rpx 0;
		}
	}

	.user-model {
		@include between(100%);
		padding: 40rpx 38rpx 120rpx;
		background: #FFFFFF;

		.avatar-box {
			@include start();

			.info {
				margin-left: 28rpx;
				color: #222222;

				.nickname {
					font-size: 36rpx;
				}

				.mobile {
					font-size: 30rpx;
					margin-top: 8rpx;
				}
			}
		}
	}

	.content {
		padding: 0 38rpx 200rpx;
		margin-top: -80rpx;
	}

	.invite-box {
		position: relative;
		width: 100%;
		height: 172rpx;

		.invite-info {
			position: absolute;
			left: 0;
			top: 0;
			@include between(100%, 100%);
			z-index: 9;
			padding: 32rpx 40rpx;

			.invite-title {
				color: #FFFFFF;

				.h1 {
					font-size: 48rpx;
				}

				.h2 {
					margin-top: 4rpx;
				}
			}
		}
	}

	.navigate-box {
		margin-top: 40rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		padding: 50rpx 10rpx;

		.item {
			@include center();
			flex-direction: column;
			color: #606672;
			font-size: 30rpx;

			&>view {
				margin-top: 24rpx;
			}
		}
	}

	.cell-group {
		margin-top: 40rpx;

		.cell-item {
			@include between(100%, 130rpx);
			background: #FFFFFF;
			border-radius: 30rpx;
			padding: 0 30rpx;
			margin-bottom: 30rpx;

			.left {
				@include start();

				&>view {
					font-size: 32rpx;
					color: #606672;
					margin-left: 32rpx;
				}
			}
		}
	}
</style>